<template>
  <div
    v-infinite-scroll="handleInfiniteOnLoad"
    style="margin-left: 30px;margin-right: 30px"
    :infinite-scroll-disabled="busy"
    :infinite-scroll-distance="10"
  >
    <a-list
      v-if="comments.length"
      :loading="loading"
      :data-source="comments"
      :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
      item-layout="horizontal"
    >
      <a-list-item slot="renderItem" slot-scope="item">
        <a-comment
          :author="item.author"
          :avatar="item.avatar"
          :content="item.content"
          :datetime="item.datetime"
        />
      </a-list-item>
    </a-list>
    <a-affix :offset-bottom="bottom">
      <a-comment>
        <a-avatar
          slot="avatar"
          src="https://oneraku-resource.oss-cn-shanghai.aliyuncs.com/logo.png"
          alt="客服"
        />
        <div slot="content">
          <a-form-item>
            <a-textarea :rows="4" :value="dialogData.txt" @change="handleChange" />
          </a-form-item>
          <a-form-item>
            <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
              添加评论
            </a-button>
          </a-form-item>
        </div>
      </a-comment>
    </a-affix>
  </div>
</template>
<script>
import moment from 'moment'
import { workOrderComments, workOrderList, addWorkOrderComments } from '@/api/admin'
import infiniteScroll from 'vue-infinite-scroll'
export default {
  directives: { infiniteScroll },
  data() {
    return {
      comments: [],
      submitting: false,
      value: '',
      loading: false,
      moment,
      page: {
        workOrderId: this.$route.query.orderid,
        size: 10,
        current: 1,
        total: 50
      },
      dialogData: {
        workOrderId: this.$route.query.orderid,
        txt: '',
        attach: '',
        uid: '',
        attachList: [],
        sid: this.$store.state.user.id
      },
      busy: false,
      bottom: 10
    }
  },
  mounted() {
    this.load()
    workOrderList({ id: this.$route.query.orderid }).then(res => {
      this.dialogData.uid = res.body[0]['creator']
    })
  },
  methods: {
    load() {
      this.loading = true
      workOrderComments(this.page).then(response => {
        response.body.forEach(i => {
          console.log(i)
          if (i.type === 'sys') {
            this.comments.push({
              author: '管理员',
              avatar: 'https://oneraku-resource.oss-cn-shanghai.aliyuncs.com/logo.png',
              content: i.txt,
              datetime: moment(i.createTime, 'YYYY-MM-DD HH:mm:ss').fromNow()
            })
          } else {
            this.comments.push({
              author: '用户',
              avatar: 'https://oneraku-resource.oss-cn-shanghai.aliyuncs.com/timg.jpeg',
              content: i.txt,
              datetime: moment().fromNow()
            })
          }
        })
        this.page.total = response.count
        this.page.current += 1
        this.loading = false
      })
    },
    handleInfiniteOnLoad() {
      const data = this.comments
      this.loading = true
      if (data.length > this.page.total) {
        this.$message.warning('Infinite List loaded all')
        this.busy = true
        this.loading = false
        return
      }
      workOrderComments(this.page).then(response => {
        response.body.forEach(i => {
          if (i.type === 'sys') {
            this.comments.push({
              author: '管理员',
              avatar: 'https://oneraku-resource.oss-cn-shanghai.aliyuncs.com/logo.png',
              content: i.txt,
              datetime: moment(i.createTime, 'YYYY-MM-DD HH:mm:ss').fromNow()
            })
          } else {
            this.comments.push({
              author: '用户',
              avatar: 'https://oneraku-resource.oss-cn-shanghai.aliyuncs.com/timg.jpeg',
              content: i.txt,
              datetime: moment().fromNow()
            })
          }
        })
        this.page.total = response.count
        this.page.current += 1
        this.loading = false
      })
    },
    handleSubmit() {
      if (!this.dialogData.txt) {
        return
      }
      this.submitting = true
      // this.dialogData.attach = this.dialogData.attachList.toLocaleString()
      addWorkOrderComments(this.dialogData).then(res => {
        this.submitting = false
        this.dialogData.txt = ''
        if (res.code === '200' || res.code === 200) {
          this.$message({
            type: 'success',
            message: '添加回复成功'
          })
          this.comments = []
          this.page.current = 1
          this.load()
        } else {
          this.$message({
            type: 'warning',
            message: res.message
          })
        }
      }).catch(err => {
        this.submitting = false
        this.$message({
          type: 'warning',
          message: err
        })
      })

      // setTimeout(() => {
      //   this.submitting = false
      //   this.comments = [
      //     {
      //       author: 'Han Solo',
      //       avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
      //       content: this.value,
      //       datetime: moment().fromNow()
      //     },
      //     ...this.comments
      //   ]
      //   this.value = ''
      // }, 1000)
    },
    handleChange(e) {
      this.dialogData.txt = e.target.value
    }
  }
}
</script>
